<template>
	<view class="content">
    <concern-banner ref="concern"></concern-banner>
		<view class="tips-box"></view>
		<view class="info-box">
			<view class="info-block">
				<view class="tips-content">易朴梅花易数</view>
				<view class="section info-tips">
					<view>选择您想要的起卦方式</view>
				</view>
				<view class="meihua-item" @click="goToPage" data-name="shijian">
					<view class="meihua-titile">时间起卦</view>
				</view>
				<view class="meihua-item" @click="goToPage" data-name="suiji">
					<view class="meihua-titile">随机起卦</view>
				</view>
				<view class="meihua-item" @click="goToPage" data-name="baoshu">
					<view class="meihua-titile">报数起卦</view>
				</view>
				<view class="meihua-item" @click="goToPage" data-name="zhiding">
					<view class="meihua-titile">指定起卦</view>
				</view>
				<view class="meihua-item" @click="goToPage" data-name="about">
					<view class="meihua-titile">八宫六十四卦</view>
				</view>
			</view>
		</view>
    <activity-box :positionId="301"></activity-box>
    <yipu-logo></yipu-logo>
	</view>
</template>

<script>
	var e = require("@/utils/interopRequireDefault")(require("@/utils/meihua/getDateFn.js"));
	var a = new(require("@/utils/meihua/calendarConverterFn.js").CalendarConverter)();
	var t = (new(require("@/utils/meihua/listsFn.js").Lists)(), new(require("@/utils/meihua/siZhuInfo.js").SiZhuInfo)());
  
  import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				// 跳转对应路由
				pageRoute: {
					"shijian": "/pages/meihua/shijian/shijian",
					"baoshu": "/pages/meihua/baoshu/baoshu",
					"zhiding": "/pages/meihua/zhiding/zhiding",
					"about": "/pages/meihua/about/about"
				}
			}
		},
    computed: {
      ...mapGetters({
        isConcern: 'user/isConcern'
      })
    },
		methods: {
			goToPage: function(n) {
        // if (this.isConcern == true) {
          let r = n.currentTarget.dataset.name;
          // 随机起卦
          if (r === "suiji") {
            var o = (0, e.default)(new Date(), "Y");
            var s = (0, e.default)(new Date(), "M");
            var i = (0, e.default)(new Date(), "D");
            var u = Math.floor((new Date().getHours() + 1) % 24 / 2) + 1;
            var l = "子丑寅卯辰巳午未申酉戌亥" [u - 1],
              g = new Date(o, s - 1, i);
            var c = a.solar2lunar(g);
            var f = t.getSiZhu(c.cDay, u) + l;
            var p = t.getKongWang(c.cDay);
            var d = (0, e.default)(new Date(), "Y年M月D日 h:m");
            var w = c.cYear + "年" + c.lunarMonth + "月" + c.lunarDay + "日" + l + "时";
            var h = c.cYear + " " + c.cMonth + " " + c.cDay + " " + f + " (" + p + "空)";
            var D = {
                type: 2,
                sg: parseInt(8 * Math.random() + 1),
                xg: parseInt(8 * Math.random() + 1),
                dy: parseInt(6 * Math.random() + 1),
                sc: 1,
                number1: 1,
                number2: 1,
                gonli: d,
                nongli: w,
                sizhu: h
              },
              v = "/pages/meihua/details/details?info=" + JSON.stringify(D);
            uni.navigateTo({
              url: v
            });
          } else {
            let url = this.pageRoute[r];
            uni.navigateTo({
              url: url
            })
          }
        // }else{
        //   this.$refs.concern.concernPopup()
        // }
			}
    }
	}
</script>

<style>
	.content {
		height: 100%;
		width: 100%;
	}

	.tips-box {
		height: 400rpx;
		background-color: #c6a680;
		width: 100%;
	}

	.tips-content {
		color: #c5a57e;
		height: 65rpx;
		width: 100%;
		margin-top: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.section {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #000;
		margin-bottom: 24rpx;
	}
	.info-tips {
		margin: 58rpx 0;
	}

	.info-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: -230rpx;
	}

	.info-block {
		background-color: #fff;
		width: 640rpx;
		height: fit-content;
		border-radius: 0rpx;
		box-shadow: 0 0 20rpx #666;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 48rpx;
	}

	.meihua-item {
		width: 521rpx;
		height: 78rpx;
		
		font-size: 32rpx;
		color: #fff;
		background-color: #c6a680;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 36rpx;
	}
  
  .ad-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
  }
  .ad-content {
    width: 640rpx;
    height: 181rpx;
    box-shadow: 0 0 10rpx #666;
    background-color: #c6a680;
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .ad-box-tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
  }
  .tips-title {
    font-size: 36rpx;
  }
  .tips-des {
    font-size: 28rpx;
  }
  .ad-btn {
    width: 240rpx;
    height: 50rpx;
    background-color: #ffffff;
    border-radius: 25rpx;
    color: #4b240d;
    font-weight: bold;
    text-align: center;
    margin-top: 15rpx;
    font-size: 28rpx;
    line-height: 46rpx;
  }
	.logo-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logo-img {
		padding: 38rpx 0;
		width: 100rpx;
		height: 100rpx;
	}
</style>
